<template>
	<view class="content">
		<u-navbar :is-back="false" :title="title" title-color="white" :background="background"></u-navbar>
		<view class="search">
			<u-search 
				border-color="" 	search-icon-color=""
				placeholder="搜索"  	v-model="keyword" 
				@search="search"    @custom="search">
			</u-search>
		</view>
		
		<view class="wrap">
			<u-swiper :list="list" height="350"></u-swiper>
		</view>
		
		<view class="item_wrap" v-for="(item,indx) in 10":key = "index">
			<view class="card">
				<view class="top">
					<text>7-402捡到一个耳机</text>
				</view>
				
				<view class="middle">
					<view class="left">
						<image src="/static/demo1.jpg" mode=""></image>
					</view>
					<view class="right">
						<view class="content">
							<text>
								捡到一个耳机捡到一个耳机
								捡到一个耳机捡到一个耳机
								捡到一个耳机捡到一个耳机
							</text>
						</view>
						<view class="tags" >
							<view class="item">
								耳机
							</view>	
							<view class="item">
								电子产品
							</view>								
						</view>
					</view>
				</view>	
				
				<view class="bottom">
					<view class="left">
						2021-10-20
					</view>
					<view class="right">
						<view class="view">
							<u-icon name="eye" color="#99CCFF"></u-icon>
							<text>101</text>
						</view>
						<view class="zan">
							<u-icon name="thumb-up" color="#FF6666"></u-icon>
							<text>30</text>
						</view>
						<view class="comments">
							<u-icon name="more-circle" color="#99CC66"></u-icon>
							<text>10</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {	
		data() {
			return {
				title:"首页",
				background:{
					backgroundImage:'linear-gradient(120deg, #f6d365 0%, #fda085 100%)'
				},
				keyword:' ',
				list: [{
							image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							title: '昨夜星辰昨夜风，画楼西畔桂堂东'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
							title: '身无彩凤双飞翼，心有灵犀一点通'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
							title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
						}
					],
			}
		},
		onLoad() {
			this.login();
		},
		computed:{
			...mapGetters(['getUserinfo'])
		},
		methods: {
			login(){
				uni.login({
					provider:'weixin',
					success:res=>{
						console.log(res.code);
						this.$u.api.login({
							appid:this.appid,
							code:res.code
						}).then(res=>{
							console.log(res);
						})
					}
				})
			},
			search(){
				console.log(this.keyword)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
			.search {
				margin: 10rpx 20rpx;
			}
			.wrap {
				height: 300rpx;
				margin-bottom: 80rpx;
			}
			.card {
				width: 700rpx;
				height: 250rpx;
				display: flex;
				flex-direction: column;
				margin: 20rpx auto;
				// background-color: rgba($color: #000000, $alpha: 0.2);
	
				.top {
					text {
						font-size: 30rpx;
						font-weight: bold;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin: 5rpx 10rpx;
					}
				}
	
				.middle {
					display: flex;
					height: 200rpx;
	
					.left {
						//background-color: rgba($color: #000000, $alpha: 0.3);
						image {
							width: 250rpx;
							height: 150rpx;
							margin: 0 20rpx 10rpx 10rpx;
							border-radius: 10rpx;
	
						}
					}
	
					.right {
						flex: 1;
						.content {
								text{
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
						}
	
						.tags {
							display: flex;
							width: 400rpx;
							white-space: nowrap;
							overflow: hidden;
							.item{
								margin-right: 20rpx;
								background-color: rgba($color: #000000, $alpha: 0.08);
								padding: 5rpx 10rpx;
								border-radius: 5rpx;
								font-size: 20rpx;
								
							}
						}
					}
				}
				
				.bottom{
					// flex: 1;
					display: flex;
					// background-color: rgba($color: #000000, $alpha: 0.5);
					height: 70rpx;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 13rpx;
						margin-left: 10rpx;
					}
					.right{
						flex: 1;
						display: flex;
						justify-content: space-around;
						margin: 0 40rpx;
						.view{
							text{margin-left: 8rpx;}
						}
						.zan{
							text{margin-left: 8rpx;}
						}
						.comments{
							text{margin-left: 8rpx;}
						}
					}
				}
			}
		}
</style>
